<script>
export default {
  name: 'TodoFooter',
}
</script>
<script setup name="TodoFooter">
import useStore from '../../store'
const { todos } = useStore()
</script>
<template>
  <footer class="footer" v-if="todos.list.length > 0">
    <span class="todo-count"
      ><strong>{{ todos.leftCount }}</strong> item left</span
    >
    <ul class="filters">
      <li v-for="item in todos.tabs" :key="item" @click="todos.changeActive(item)">
        <a :class="item === todos.active && 'selected'" href="#/">{{ item }}</a>
      </li>
    </ul>
    <!-- // 什么时候才显示，清空已完成按钮呢？ 已完成的数量大于 0 的时候 -->
    <button class="clear-completed" v-if="todos.list.length - todos.leftCount > 0" @click="todos.clearCompleted">Clear completed</button>
  </footer>
</template>
